<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>声明式渲染</title>
</head>
<body>
    <!-- 声明式渲染 -->
    <div id="app">
        {{message}}
    </div>
     <!-- 声明式渲染 -->
    <!-- 指令 -->
    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
       
    </div>
     <!-- 指令 -->
     <!-- 条件与循环 -->
     <div id="app-3">
         <p v-if="seen">现在你看到我了</p>
     </div>

     <div id="app-4">
         <ol>
             <li v-for="todo in todos">
                 {{todo.text}}
             </li>
         </ol>
     </div>
     <!-- 条件与循环 -->

     <!-- 处理用户输入 -->
     <div id="app-5">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">反转消息</button>
     </div>

     <div id="app-6">
         <p>{{message}}</p>
         <input v-model="message">
     </div>
     <!-- 处理用户输入 -->



<script type="text/javascript">
// 声明式渲染
var app= new Vue({
    el:'#app',
    data:{
        message:'hello vue!'
    }
})

//指令
var app2=new Vue({
    el:'#app-2',
    data:{
        message:'页面加载于'+new Date().toLocaleString()
    }
})

//条件与循环
var app3 =new Vue({
    el:'#app-3',
    data:{
        seen:true
    }
})

var app4=new Vue({
    el:'#app-4',
    data:{
        todos:[
            {text:'学习vue'},
            {text:'学习vue'},
            {text:'整个项目'}
        ]
    }
})

//处理用户输入
var app5=new Vue({
    el:"#app-5",
    data:{
        message:'hello vue.js!'
    },
    methods:{
        reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
     }
    }
})

var app6=new Vue({
    el:"#app-6",
    data:{
        message:"hello vue!"
    }
})
</script>


    
</body>
</html>